<template>
  <div>
    <home-header></home-header>
    <home-swiper :swiperList='swiperList'></home-swiper>

		<home-icons :iconsList='iconsList'></home-icons>

		<home-location></home-location>
		<home-activity></home-activity>

		<home-hot :hotList='hotList'></home-hot>

		<home-like :likeList='likeList'></home-like>

		<home-vacation :vacationList='vacationList'></home-vacation>
  </div>
</template>

<script>
import { mapState } from "vuex";
import HomeHeader from "./pages/Header.vue";
import HomeSwiper from "./pages/Swiper.vue";
import HomeIcons from "./pages/Icons.vue";
import HomeLocation from "./pages/Location.vue";
import HomeActivity from "./pages/Activity.vue";
import HomeHot from "./pages/Hot.vue";
import HomeLike from "./pages/Like.vue";
import HomeVacation from "./pages/Vacation.vue";
export default {
  components: {
    HomeHeader,
    HomeSwiper,
    HomeIcons,
    HomeLocation,
    HomeActivity,
    HomeHot,
    HomeLike,
    HomeVacation
  },
  data() {
    return {
      swiperList: [],
      iconsList: [],
      hotList: [],
      likeList: [],
      vacationList: [],
      changeCity: ""
    };
  },
  computed: {
    ...mapState(["city"])
  },
  created() {
    this.getHttp();
    this.changeCity = this.city;
  },
  methods: {
    getHttp() {
      this.$http.get("http://localhost:8080/dataHome.json").then(res => {
        console.log(res.data.data);
        const data = res.data.data;
        data.forEach((item, index) => {
          // console.log(item);
          console.log(item.city);
          if (item.city == this.city) {
            this.swiperList = item.swiperList;
            this.iconsList = item.iconsList;
            this.hotList = item.hotList;
            this.likeList = item.likeList;
            this.vacationList = item.vacationList;
          }
        });

        // this.swiperList = data.swiperList;
        // this.iconsList = data.iconsList;
        // this.hotList = data.hotList;
        // this.likeList = data.likeList;
        // this.vacationList = data.vacationList;
      });
    }
  },
  activated() {
    if (this.changeCity != this.city) {
      this.getHttp();
      this.changeCity = this.city;
    }
  }
};
</script>

<style lang="less" scoped>

</style>